<template>
	<div class="bindPhone">
		<popup v-model="show" position="right" width="100%">
			<BaseHeader title="绑定手机号" showBack="true" preventGoBack="true" backText="" :back="hide" ></BaseHeader>
			<group class="mtHeader">
				<flexbox :gutter="0">
			      	<flexbox-item :span="3/5">
			      		<x-input v-model="form.phone" ref="phone" is-type="china-mobile" required class="weui-vcode"  placeholder="请输入手机号"></x-input>
			      	</flexbox-item>
			      	<flexbox-item :span="2/5">
			      		<SendPhoneCode ref="sendPhoneCode" :callback="getKey" sendurl="/home/account/send_bind_phone_code" :phone="form.phone" cookiename="bindPhone"></SendPhoneCode>
			      	</flexbox-item>
			    </flexbox>
			    <x-input title='验证码' v-model="form.code" ref="code" required></x-input>
		    </group>
		    <div style="padding:15px;">
		    	<x-button @click.native="bind" :show-loading="btn.showloading" :disabled="btn.disabled">绑定</x-button>
		    </div>
		</popup>
	</div>
</template>
<script>
	import {Popup,Group,Cell,XInput,Flexbox,FlexboxItem,XButton} from 'vux'

	import BaseHeader from 'touch/components/common/header'
	import SendPhoneCode from 'touch/components/common/send-phone-code'
	import Axios from 'touch/config/axios'

	export default{
		components :{
			Popup,
			BaseHeader,
			Group,
			XInput,
			Cell,
			XButton,
			SendPhoneCode,
			Flexbox,
			FlexboxItem,
		},
		data () {
			return {
				show : false,
				form :{
					phone : '',
					code : '',
					key : '',
				},
				btn :{
					showloading : false,
					disabled : false,
				}
			}
		},
		methods:{
			hide(){
				this.show = false;
			},
			showTab(name){
				this.$refs[name].show = true;
			},
			getKey(key){
				this.form.key = key;
			},
			bind(){
				if(this.form.phone=='' || this.form.code=='' || this.$refs.phone.valid==false || this.$refs.code.valid==false){return false;}
				this.btn.showloading = true;
				this.btn.disabled = true;
				Axios.Home.BindPhone(this.form)
		        .then(res =>{
		        	this.btn.showloading = false;
		        	this.btn.disabled = false;
		        	if(!res) return false;
		            this.$vux.toast.show({type : 'success', text: res.msg});
		            this.back();
		        })
			},
			formReset(){
				this.$refs.sendPhoneCode.checkRun();
				this.$refs.phone.reset();
				this.$refs.code.reset();
				this.form.key = '';
			}
		},
		watch :{
			show(bool){
				this.formReset();
			}
		}
	}
</script>
